{% extends "base.html" %}
{% block title %}登录 - 短视频去水印{% endblock %}
{% block content %}
<div class="row">
    <div class="col">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">用户登录</h5>
                {% if error %}
                <div class="alert alert-danger">{{ error }}</div>
                {% endif %}
                <form id="login-form" method="post">
                    <div class="form-group">
                        <label for="username">账号</label>
                        <input type="text" class="form-control" id="username" name="username" placeholder="输入你的账号"
                               required>
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" class="form-control" id="password" name="password"
                               placeholder="输入你的密码" required>
                    </div>
                    <!-- 新增验证码 -->
                    <div class="form-group">
                        <label for="captcha">验证码</label>
                        <div class="d-flex align-items-center">
                            <input type="text" class="form-control" style="width: 28%;" id="captcha" name="captcha"
                                   placeholder="输入验证码"
                                   required>
                            <img id="captchaImg" src="/captcha" alt="验证码" title="点击刷新验证码"
                                 style="margin-left:10px; cursor:pointer;">
                        </div>
                    </div>
                    <div class="custom-control custom-checkbox form-group">
                        <input type="checkbox" class="custom-control-input" id="remember" name="remember">
                        <label class="custom-control-label" for="remember">记住我</label>
                    </div>
                    <button type="submit" id="login" class="btn btn-primary">登录</button>
                    <a href="/user/register" class="btn btn-secondary btn-rounded">没有账户点击注册</a>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<!-- 引入 ClipboardJS -->
<script src="/static/js/clipboard.min.js"></script>
<script>
    function message(type, text) {
        const div = document.createElement('div');
        div.textContent = text;
        div.style.position = 'fixed';
        div.style.top = '5%';
        div.style.left = '50%';
        div.style.transform = 'translate(-50%, -50%)';
        div.style.padding = '10px 30px';
        div.style.background = '#fff'; // 白色背景
        div.style.color = type === 'success' ? '#28a745' : '#dc3545'; // 成功绿/错误红
        div.style.fontSize = '14px';
        div.style.fontWeight = '100';
        div.style.border = `1px solid ${type === 'success' ? '#cccccc' : '#dc3545'}`;
        div.style.borderRadius = '8px';
        div.style.boxShadow = '0 4px 15px rgba(0,0,0,0.2)';
        div.style.zIndex = 9999;
        div.style.opacity = 0;
        div.style.transition = 'opacity 0.3s ease, transform 0.3s ease';

        document.body.appendChild(div);

        // 动画出现
        requestAnimationFrame(() => {
            div.style.opacity = 1;
            div.style.transform = 'translate(-50%, -50%) scale(1)';
        });

        // 1.5 秒后淡出并移除
        setTimeout(() => {
            div.style.opacity = 0;
            div.style.transform = 'translate(-50%, -50%) scale(0.9)';
            setTimeout(() => div.remove(), 300);
        }, 1500);
    }

    // 点击验证码刷新
    const captchaImg = document.getElementById('captchaImg');
    captchaImg.onclick = function () {
        this.src = '/captcha?' + new Date().getTime(); // 防止缓存
    };

    $("#login-form").submit(function (e) {
        e.preventDefault();
        var username = $("#username").val();
        var password = $("#password").val();
        var captcha = $("#captcha").val(); // ✅ 新增

        $("#login").attr("disabled", true).text("登录中...");
        $.post("/user/login", {username: username, password: password, captcha_input: captcha}, function (data) {
            $("#login").attr("disabled", false).text("登录");
            captchaImg.click(); // 刷新验证码
            if (data.code == 1) {
                message('success', data.msg);
                setTimeout(() => window.location.href = '/user/dashboard', 1000);
            }else {
                message('error', data.msg);
            }
        }, "json").fail(function () {
            $("#login").attr("disabled", false).text("登录");
            captchaImg.click(); // 刷新验证码
            alert("请检查你的网络");
        });
    });
</script>
{% endblock %}